<template>
	<div class="hello">
		<div class="page1">
			<div class="header">
				<div class="nav">
					<div class="logo">
						<img :src="logo">
					</div>
					<div class="nav-info">
						<a href="#">下载App</a>
						<a href="#">
							<van-icon name="search" />
						</a>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="artist">
					<div class="artist-detail">
						<div class="artist-info">
							<p>艺术家</p>
							<p>刘惜君</p>
						</div>
						<div class="artist-photo">
							<div class="icon">
								<span></span>
								<span>收藏</span>
							</div>
							<div class="artist-pic">
								<img :src="artist">
							</div>
						</div>
					</div>
					<div class="tab-select">
						<ul>
							<li class="tab-item" @click="tab" :class="{'active':display}">热门单曲</li>
							<li class="tab-item" @click="tab1" :class="{'active':display1}">全部专辑</li>
						</ul>
					</div>
					<div class="song" v-show="show">
						<div class="controller">
							<div class="btn-play">
								<van-icon name="play" />
								<span>全部播放</span>
							</div>
							<div class="download">
								<van-icon name="down" />
								<span>下载</span>
							</div>
						</div>
						<ul>
							<li v-for="item in song" :key="item.id">
								<div class="picture">
									<img :src="item.url">
								</div>
								<div class="song-info">
									<div class="info-top">
										<i v-show="item.isShow">VIP</i>
										<span>{{item.song}}</span>
									</div>
									<div class="info-bot">
										<span>{{item.name}}</span>
									</div>
								</div>
								<div>
									<span class="song-span">{{item.time}}</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="song" v-show="show1">
						<ul>
							<li v-for="item in song2" :key="item.id">
								<div class="picture">
									<img :src="item.url">
								</div>
								<div class="song-info">
									<div class="info-top">
										<i v-show="item.isShow">VIP</i>
										<span>{{item.song}}</span>
									</div>
									<div class="info-bot">
										<span>{{item.name}}</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="footer-btn">
				<div class="player">
					<div class="player-content">
						<div class="player-left">
							<span>暂无歌曲播放</span>
						</div>
						<div class="player-right">
							<span></span>
							<span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
export default {
  data(){
	return{
		show:true,
		show1: false,
		display:true,
		display1:false,
		logo:require('../assets/z-qqyy/Album1/1.png'),
		icon:require('../assets/z-qqyy/Album1/3.jpg'),
		artist:require('../assets/z-qqyy/Singer4/1.jpg'),
		song:[
			{url:require("../assets/z-qqyy/Singer4/2.jpg"),song:"聊表心意",name:"薛之谦 / 刘惜君",time:"05:17"},
			{url:require("../assets/z-qqyy/Singer4/3.jpg"),song:"或光",name:"刘惜君",time:"03:26",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/4.jpg"),song:"嗜睡症",name:"刘惜君",time:"04:21",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/3.jpg"),song:"鱼的记忆",name:"刘惜君",time:"04:33",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/3.jpg"),song:"后来我们会怎样",name:"刘惜君",time:"04:33",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/5.jpg"),song:"浪里游",name:"刘惜君",time:"04:41"},
			{url:require("../assets/z-qqyy/Singer4/6.jpg"),song:"不了了知",name:"刘惜君",time:"04:40",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/7.jpg"),song:"我是爱过你",name:"刘惜君",time:"04:45",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/8.jpg"),song:"直到那一天",name:"刘惜君",time:"04:28",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/3.jpg"),song:"就算了吗",name:"刘惜君",time:"03:55",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/9.jpg"),song:"浪里游",name:"刘惜君",time:"04:41"},
			{url:require("../assets/z-qqyy/Singer4/5.jpg"),song:"说完",name:"刘惜君",time:"04:13"},
			{url:require("../assets/z-qqyy/Singer4/3.jpg"),song:"来",name:"刘惜君",time:"04:06",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/10.jpg"),song:"二见钟情",name:"刘惜君",time:"03:11",isShow:true},
			{url:require("../assets/z-qqyy/Singer4/5.jpg"),song:"嗜睡症",name:"刘惜君",time:"04:22"},
			{url:require("../assets/z-qqyy/Singer4/11.jpg"),song:"光的摩斯密码",name:"刘惜君",time:"04:30"},
			{url:require("../assets/z-qqyy/Singer4/12.jpg"),song:"长夜",name:"刘惜君",time:"04:30"},
			{url:require("../assets/z-qqyy/Singer4/5.jpg"),song:"梦银河",name:"刘惜君",time:"03:25"},
			{url:require("../assets/z-qqyy/Singer4/5.jpg"),song:"如我",name:"刘惜君",time:"04:44"},
			{url:require("../assets/z-qqyy/Singer4/13.jpg"),song:"无尽",name:"刘惜君",time:"04:51",isShow:true},
		],
		song2:[
			{url:require("../assets/z-qqyy/Singer4/3.jpg"),song:"当我身边空无一人",name:"2015-11-11"},
			{url:require("../assets/z-qqyy/Singer4/5.jpg"),song:"如我",name:"2017-12-29"},
			{url:require("../assets/z-qqyy/Singer4/4.jpg"),song:"嗜睡症",name:"2017-11-15"},
			{url:require("../assets/z-qqyy/Singer4/6.jpg"),song:"不了了知",name:"2019-04-30"},
			{url:require("../assets/z-qqyy/Singer4/7.jpg"),song:"我是爱过你",name:"2020-05-26"},
			{url:require("../assets/z-qqyy/Singer4/9.jpg"),song:"浪里游",name:"2017-12-21"},
			{url:require("../assets/z-qqyy/Singer4/12.jpg"),song:"硬地之美",name:"2019-09-04"},
			{url:require("../assets/z-qqyy/Singer4/13.jpg"),song:"无尽",name:"2019-08-27"},
			{url:require("../assets/z-qqyy/Singer4/14.jpg"),song:"故意不爱你",name:"2017-01-20"},
			{url:require("../assets/z-qqyy/Singer4/15.jpg"),song:"如我",name:"2017-12-11"},
			{url:require("../assets/z-qqyy/Singer4/16.jpg"),song:"咱们相爱吧 电视原声带",name:"2016-11-10"},
			{url:require("../assets/z-qqyy/Singer4/17.jpg"),song:"惜君电台",name:"2015-11-05"},
			{url:require("../assets/z-qqyy/Singer4/18.jpg"),song:"解放了",name:"2019-12-24"},
			{url:require("../assets/z-qqyy/Singer4/19.jpg"),song:"不期而遇",name:"2017-05-05"},
			{url:require("../assets/z-qqyy/Singer4/20.jpg"),song:"爱情",name:"2017-05-03"},
			{url:require("../assets/z-qqyy/Singer4/21.jpg"),song:"原上草",name:"2017-07-11"},
		]
	}
  },
  methods:{
	tab(){
		this.show = true;
        this.show1 = false;
		this.display = true;
		this.display1 = false;
    },
	tab1(){
		this.show = false;
	    this.show1 = true;
		this.display1 = true;
		this.display = false;
	}
  }
}
</script>

<style scoped>
  .hello{
	background-color: #fff;
  }
  /* 头部 */
  .header{
	width: 100%;
	height: 2.173853rem;
	position: fixed;
	z-index: 999;
	background-color: #fff;
	border-bottom: .5px solid #e0e0e0;
  }
  .nav{
	height: 2.173853rem;
	padding: 0 .799573rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .logo{
	width: 100%;
	height: auto;
  }
  .logo img{
	width: 2.4rem;
	height: auto;
  }
  .nav-info{
	width: 5rem;
  }
  .nav-info a:first-child{
	display: inline-block;
	width: 1.5rem;
	height: .799893rem;
	background-color: #e61723;
	border-radius: .053304rem;
	line-height: .799893rem;
	padding: 0 .266524rem;
	font-size: .373134rem;
	color: #fafafa;
  }
  .nav-info a:nth-child(2) i{
	font-size: .692963rem;
	margin-left: .4rem;
	vertical-align: middle;
  }
  /* 内容 */
  .content{
	padding-top: 2.158848rem;
  }
  .artist{
	padding: 0 .799573rem 0 1.012793rem;
  }
  .artist-detail{
	width: 100%;
	margin: .58001rem 0 1.063006rem 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .artist-info p:first-child{
	font-size: .319829rem;
  }
  .artist-info p:nth-child(2){
	font-size: .426439rem;
    font-weight: 700;
	margin-top: .266524rem;
  }
  .icon{
	display: inline-block;
    margin-right: .266524rem;
	vertical-align: bottom;
  }
  .icon span:first-child{
	width: 16px;
	height: 16px;
	background: url(../assets/z-qqyy/Singer1/2.png);
    display: inline-block;
    background-size: contain;
    transform: translateY(4px);
  }
  .icon span:nth-child(2){
	font-size: .319829rem;
	color: #333;
	margin-left: .133262rem;
  }
  .artist-pic{
	display: inline-block;
	width: 2.777851rem;
	height: 2.777851rem;
  }
  .artist-pic img{
	width: 100%;
	height: 100%;
	vertical-align: middle;
  }
  .tab-select{
	width: 100%;
	height: 1.835687rem;
  }
  .tab-item{
	float: left;
    margin-right: 8.21vw;
    line-height: 18.36vw;
    color: #999;
    font-size: 3.38vw;
  }
  .active{
	color: #333;
	font-weight: 700;
  }
  .controller{
  	height: 1.19936rem;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
	margin-bottom: .675986rem;
  }
  .download{
  	margin-right: .533049rem;
  	color: #af9c7c;
  	font-size: .266524rem;
  }
  .download i{
  	font-size: .266524rem;
  	vertical-align: bottom;
  	margin-right: .133262rem;
  }
  .btn-play{
  	padding: .199893rem .453091rem;
    border: .026652rem solid #a8a8a8;
    border-radius: .533049rem;
    font-size: .373134rem;
  }
  .btn-play i{
  	vertical-align: middle;
  	color: #333;
	transform: translateY(-1px);
  }
  .btn-play span{
  	display: inline-block;
  	height: .533049rem;
  	line-height: .533049rem;
  	color: #333;
  }
  .song{
	margin-bottom: 2.665245rem;
  }
  .song ul{
	border-top: .5px solid #eee
  }
  .song ul li{
	border-bottom: .5px solid #eee;
    padding: .266524rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .picture{
	margin-right: .313992rem;
  }
  .picture img{
	width: 1.207702rem;
	height: 1.207702rem;
  }
  .song-info{
	flex: 1 1 0%;
  }
  .info-top i{
	display: inline-block;
	background: #af9c7c;
    color: #fff;
    border-radius: .373134rem;
    font-size: .319829rem;
    padding: .039978rem .106609rem;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
	margin-right: .133262rem;
  }
  .info-top span{
	font-size: .319829rem;
    font-weight: 700;
	display: inline-block;
  }
  .info-bot{
	font-size: .319829rem;
	margin-top: .186567rem;
  }
  .song-span{
	font-size: .373134rem;
	color: #333333;
  }
  .footer-btn{
	width: 100%;
    background-color: #f7f7f7;
	position: fixed;
	bottom: 0;
	z-index: 999;
  }
  .player{
	width: 100%;
	background-color: #fff;
  }
  .player-content{
	width: 100%;
	height: 1.30597rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    color: #333;
    padding: 0 .799573rem;
  }
  .player-left span{
	font-size: .346481rem;
  }
  .player-right span:first-child,.player-right span:nth-child(2){
	width: .719616rem;
	height: .719616rem;
	display: inline-block;
	vertical-align: middle;
	margin-left: .533049rem;
  }
  .player-right span:first-child{
	background: url(../assets/z-qqyy/Album1/4.png) no-repeat;
    background-size: 100%;
  }
  .player-right span:nth-child(2){
	background: url(../assets/z-qqyy/Album1/5.png) no-repeat;
	background-size: 100%;
  }
</style>
